<template>
  <el-row class="tac">
    <el-col :span="12">
      <el-menu
        router
        active-text-color="aqua"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><Shop /></el-icon>
            <span>商城管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              :route="{ name: 'ShopCategory' }"
              index="1-1"
              :class="flag == 'ShopCategory' ? 'is-active' : ''"
              >商品分类</el-menu-item
            >
            <el-menu-item
              :route="{ name: 'Shopping' }"
              index="1-2"
              :class="flag == 'Shopping' ? 'is-active' : ''"
              >商品</el-menu-item
            >
            <el-menu-item
              :route="{ name: 'ShopOrder' }"
              index="1-3"
              :class="flag == 'ShopOrder' ? 'is-active' : ''"
              >订单管理</el-menu-item
            >
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><List /></el-icon>
            <span>论坛管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              :route="{ name: 'ForumPlate' }"
              :class="flag == 'ForumPlate' ? 'is-active' : ''"
              index="3-1"
              >板块</el-menu-item
            >
            <el-menu-item
              :route="{ name: 'ForumList' }"
              :class="flag == 'ForumList' ? 'is-active' : ''"
              index="3-2"
              >帖子</el-menu-item
            >
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><ElementPlus /></el-icon>
            <span>活动管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              :route="{ name: 'ActiveCategory' }"
              :class="flag == 'ActiveCategory' ? 'is-active' : ''"
              index="4-1"
              >活动分类</el-menu-item
            >
            <el-menu-item
              :route="{ name: 'ActiveList' }"
              :class="flag == 'ActiveList' ? 'is-active' : ''"
              index="4-2"
              >活动列表</el-menu-item
            >
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon><PictureFilled /></el-icon>
            <span>轮播图设置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              index="5-1"
              :route="{ name: 'slideshowCategory' }"
              :class="flag == 'slideshowCategory' ? 'is-active' : ''"
              >轮播图分类</el-menu-item
            >
            <el-menu-item
              index="5-2"
              :route="{ name: 'slideshow' }"
              :class="flag == 'slideshow' ? 'is-active' : ''"
              >轮播图列表</el-menu-item
            >
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item
          index="2"
          :route="{ name: 'userList' }"
          :class="flag == 'userList' ? 'is-active' : ''"
        >
          <el-icon>
            <UserFilled />
          </el-icon>
          <span>用户管理</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import {
  Document,
  Menu as IconMenu,
  ElementPlus,
  Shop,
  UserFilled,
  PictureFilled,
  List,
} from "@element-plus/icons-vue";
/* const handleOpen = () => {
  console.log(11)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
} */
const flag = ref("");
const route = useRoute();
watch(
  route,
  (v) => {
    flag.value = v.name;
  },
  { immediate: true }
);
</script>
<style scoped lang="scss">
.tac {
  height: 100%;
}
.is-active {
  color: white;
  background-color: aqua;
}
</style>
